<template>
	<view>
		<view style="" class="flex-col btn-group ">
			<view class="btn-item " :class="myRoles=='customer'?'btn-active':''" @click="btnClick('customer')">
				顾
			</view>
			<view class="btn-item" :class="myRoles=='a_shop'?'btn-active':''" @click="btnClick('a_shop')">
				店
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "float_button",
		props: {
			defautRoles: {
				type: String,
				default: "customer"
			}
		},
		data() {
			return {
				myRoles: "customer"
			};
		},
		watch: {
			defautRoles(vale) {
				console.log(vale)
				this.myRole = vale;
			},
		},
		// mounted() {
		// 	this.myRole = this.defautRoles
		// },
		methods: {
			btnClick(roles) {
				this.myRoles = roles;
				this.$emit("btnClick", roles)
			}
		}
	}
</script>

<style>
	.btn-group {
		position: fixed;
		bottom: 100px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10rpx;
	}

	.btn-item {
		padding: 20rpx;
	}

	.btn-active {
		background-color: #ff0101;
		color: #fff;
		border-radius: 20rpx;
	}
</style>